<template>
	<view class="load-wrap" :style="{height:loadPageHeight}">
		<view class="app-loading"></view>
		<view class="loading-text">加载中...</view>
	</view>
</template>

<script>
	export default {
		name:"load-page",
		props:{
			loadPageHeight:{
				type:String,
				default:'100vh'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.load-wrap{
		width: 100%;
		background: rgba(255,255,255,0.6);
		backdrop-filter: blur(10px);
		position: absolute;
		left:0;
		top:0;
		z-index:2222;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	@keyframes tui-rotate {
		0% {
			transform: rotate(0);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
	.app-loading {
		width: 50rpx;
		height: 50rpx;
		background: 0 0;
		border-radius: 50%;
		border: 3rpx solid;
		animation: tui-rotate 0.7s linear infinite;
		border-color:$supplier-sub-color transparent $supplier-sub-color transparent;
	}
	.loading-text{
		padding-top:30rpx;
		font-size: 30rpx;
		color:#AFB0B2;
	}
	
</style>